// 便捷服务-商户列表
<template>
	<uni-nav-bar left-icon="left" :shadow="true" :statusBar="true" backgroundColor="#e68a4b" @clickLeft="back">
		<template v-slot:default>
			<view class="locationView" v-if="buildingList.length > 0">
				<uni-icons type="location" size="20"></uni-icons>
				<picker mode="selector" @change="buildingChange($event,buildingList)" :value="buildingIndex" :range="buildingList" range-key="buildingName">
					<text class="locationText">{{buildingList[buildingIndex]?.buildingName}}</text>
				</picker>
				<uni-icons type="forward" size="13"></uni-icons>
			</view>
		</template>
	</uni-nav-bar>
	<view class="container">
		<text class="noDataViewTip" v-if="!hideNoData">暂无数据</text>
		<uni-search-bar
			radius="10"
			placeholder="请输入搜索内容"
			clearButton="auto"
			cancelButton="none"
			@confirm="search"
			@clear="searchCancel"
		/>
		<uni-list :border="true">
			<uni-list-item
				v-for="(item,index) in list"
				:key="index"
				:title="item.supplierName"
				:note="item.supplierDesc"
				:thumb="item.supplierPic"
				thumbSize="lg"
				@click="getoDetail(item)"
				link>
			</uni-list-item>
		</uni-list>
	</view>
</template>

<script>
	import { getSupplierList, getBuildList } from "@/API/home.js"
	export default {
		data() {
			return {
				list: [],
				searchVlalue: '',
				buildingList: [], // 大厦数据
				buildingIndex: 0,
				currentBuild: '', // 当前定位的大楼
				serviceType: null,
				hideNoData: false,
				serviceName: ''
			}
		},
		onLoad(options) {
			this.serviceType = options.serviceType
			this.serviceName = options.title
			const self = this
			uni.getStorage({
			    key: 'user_login_key',
			    success: (res) => {
					this.getBuildList(res.data.tags)
			    }
			})
					
			uni.setNavigationBarTitle({
				title: options.title
			})
			uni.$on('changeBuilding', function(res) {
				console.log('daihai',res.data)
				console.log('daihai1',self.currentBuild)
				self.currentBuild = res.data
				self.getSupplierList(self.currentBuild.id)
			})
		},
		onUnload() {
		    // 清除监听
		    uni.$off('changeBuilding')
		},
		methods: {
			back() {
				uni.navigateBack({
					delta: 1
				})
			},
			// 大厦切换
			buildingChange(e, data) {
				this.buildingIndex = e.detail.value
				this.currentBuild = data[this.buildingIndex]
				this.getSupplierList(this.currentBuild.id)
			},
			// 搜索
			search(content) {
				this.searchVlalue = content.value
				this.getSupplierList(this.currentBuild.id)
			},
			searchCancel(res) {
				this.searchVlalue = ''
				this.getSupplierList(this.currentBuild.id)
			},
			// 获取大厦名称
			getBuildList(tags) {
				console.log('city',this.$store.state.city)
				console.log('longitude',this.$store.state.longitude)
				console.log('latitude',this.$store.state.latitude)
				getBuildList({
					city: this.$store.state.city,
					longitude: this.$store.state.longitude,
					latitude: this.$store.state.latitude,
					tags: tags
				}).then(res => {
					if (res.data) {
						this.currentBuild = res.data[0]
						this.getSupplierList(this.currentBuild.id)
						this.buildingList = res.data
					}
					console.log('11',this.buildingList)
				})
			},
			// 选择更多大厦
			chooseBuilding() {
				uni.navigateTo({
					url: '/pages/home/service/buildingList?buildInfo=' + JSON.stringify(this.buildingList)
				})
			},
			// 查询商户
			getSupplierList(id) {
				getSupplierList({
					serviceId: this.serviceType,
					buildingId: id,
					queryParam: this.searchVlalue
				}).then(res => {
					this.list = res.data
					this.hideNoData = this.list && this.list.length > 0
				})
			},
			// 预约详情
			getoDetail(supplier) {
				supplier.buildingId = this.currentBuild.id
				supplier.serviceName = this.serviceName
				supplier.buildingName = this.buildingList[this.buildingIndex]?.buildingName
				supplier.buildingDetailAddress = this.buildingList[this.buildingIndex]?.buildingDetailAddress
				uni.navigateTo({
					url: '/pages/home/merchantDetail/index?supplier=' + JSON.stringify(supplier)
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	uni-page-body,page {
		height:100%;
	}
	.locationView {
		
		text-align: center;
		height: 100%;
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		.locationText {
			background-color: transparent;
			font-size: $uni-font-size-lg;
		}
	}
	::v-deep .uni-searchbar__box {
		border: 3rpx  $bg-color-orange solid;
	}
	.container {
		width: 100%;
		height: 100vh;
	}
</style>